<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List Renders</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="clickAdd">
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<div>
    <!-- Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
    .stop
    .prevent
    .capture
    .self
    -->

    <!-- 阻止单击事件冒泡 -->
    <a  id="clickStop" v-on:click.stop="clickStop">v-on:click.stop</a>
    <!-- 提交事件不再重载页面 -->
    <form id="onSubmit" v-on:submit.prevent="onSubmit">v-on:submit.prevent
        <input type=’submit’ value=’提交' />
    </form>

    <!-- 修饰符可以串联  -->
    <a id="clickStopPrevent" v-on:click.stop.prevent="clickStopPrevent">v-on:click.stop.prevent</a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent>submit.prevent</form>

    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div id="clickCapture" v-on:click.capture="clickCapture">click.capture</div>

    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div id="clickSelf" v-on:click.self="clickSelf">clickSelf
        <li>1----</li>
        <li>---2---</li>
        <li>0000000</li>
    </div>
</div>



<script>

    var clickVm = new Vue({
        el: '#clickAdd',
        data: {
            counter: 0
        }
    })
    var clickStopVm = new Vue({
        el: '#clickStop',
        data: {},
        methods:{
            clickStop:function(){
                console.log("in clickStop")
            }
        }
    })
    var onSubmitVm = new Vue({
        el: '#onSubmit',
        data: {},
        methods:{
            onSubmit:function(){
                console.log("in onSubmit")
            }
        }
    })

    var clickStopPreventVm = new Vue({
        el: '#clickStopPrevent',
        data: {},
        methods:{
            clickStopPrevent:function(){
                console.log("in clickStopPrevent")
            }
        }
    })

    var clickCaptureVm = new Vue({
        el: '#clickCapture',
        data: {},
        methods:{
            clickCapture:function(){
                console.log("in clickCapture")
            }
        }
    })

    var clickSelfVm = new Vue({
        el: '#clickSelf',
        data: {},
        methods:{
            clickSelf:function(){
                console.log("in clickSelf")
            }
        }
    })
</script>
</body>
</html>
